<template>
	<view class="index">
		 <view class="status_bar">
		    <view class="top_view"></view> 
		</view>
		<view class="content">
			<view class="header_back">
				<view class="back_img" @tap="go_back">
					<image src="/static/imgs/back.png" mode="aspectFill"></image>
				</view>
				<view class="header_content">
					{{pro.title}}
				</view>
				<view class="back_img"> </view>
			</view>
			<scroll-view class="scrollList" scroll-y>
				<image :src="pro.pic" mode="aspectFill" class="bigmig"></image>
				<view class="linetxt">
					<view class="linetxttitle"><text class="linetxttitlel">{{pro.title}}</text></view>
					<!-- <div class="homeiconbox"><image src="/static/imgs/dianzan.png" class="homeicon"></image></div> -->
					<view class="homeiconbox"><image @tap="follow(pro)" :src="pro.isFollow==1?'/static/imgs/shoucang.png':'/static/imgs/noshoucang.png'" class="homeicon"></image></view>
				</view>
				<view class="infoarea" :class="ismax?'':'minHright'">
					 <rich-text :nodes="pro.intro" ></rich-text>
					 
				</view>
				<view v-if="!ismax" class="moreBtn" @click="ismax = true;">
					加载更多
				</view>
				<view class="addressbox" @tap="go_map">
					<image src="/static/imgs/icon-location.png" mode="aspectFill" class="locationicon"></image>
					<view class="addresstxt">
						<text class="infotxta">店铺地址</text>
						<text class="infotxtb">{{pro.address}}</text>
					</view>
					<image src="/static/imgs/right.png" class="rightsa" mode="aspectFill"></image>
				</view>
				<!-- <text class="looked">浏览量：12万</text> -->
				
				<!-- <view class="praiseNum">
					<view class="praiseIcon">
						<image src="/static/imgs/nodianzan.png" class="iconassd" mode="aspectFill"></image>
						<text>12</text>
					</view>
					<view class="praiseImgs">
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<image src="../../static/imgs/head1.png" mode="aspectFill"></image>
						<view class="more" @click="morePraise">
							更多
						</view>
					</view>
				</view> -->
			</scroll-view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return {
				pro:{},
				userInfo:{},
				//isShowMore:false, //是否显示更多
				ismax:false, //是否显示最高高度
			}
		},
		onLoad(option) {
			var _this =this;
			console.log("option",option.id)
			const value = uni.getStorageSync('storage_key');
			_this.userInfo = value;
			_this.userInfo.id = option.id;
					_this.init();
					
					
// 					if(_this.userInfo.ispass){
// 						uni.showToast({
// 							title: '账号已被查封，请与管理员联系',
// 							icon:"none" 
// 						});
// 						uni.navigateTo({
// 							url: '/pages/public/login/login'
// 						});
// 					}
				
			
			
		},
		computed:{
			isShowMore(oldVal,newVal){
				console.log(oldVal,newVal)
			}
		},
		methods:{
			follow(itm){
				let url = "";
				let _this = this;
				if(itm.isFollow==0){ url = "http://apptest.pinchao.cc/api.php/Store/follow"; }
				else{ url = "http://apptest.pinchao.cc/api.php/Store/delFollow"; }
				uni.request({
					url:url,
					method:"post",
					header:{
						app_version:'1.0.0',
						system_version:_this.$system.system,
						"Content-Type":"application/x-www-form-urlencoded"
					},
					data:{
						"store_id":itm.id,
						"access_token":_this.userInfo.access_token,
						"uid":_this.userInfo.uid
					},
					success(res) {
						//console.log(res)
						if(res.data.ret == '200'){
							if(itm.isFollow==0) itm.isFollow =1;
							else itm.isFollow =0;
							uni.showToast({
								title:itm.isFollow==0?'取消关注成功':'关注成功'
							})
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
							
					},
					error(err){
						console.log("err:",err)
					}
				})
			},
			submit(){
				this.init();
			},
			go_map(){
				let _this = this;
						uni.openLocation({
							latitude:parseFloat(_this.pro.latitude) ,
							longitude:parseFloat( _this.pro.longitude) ,
							name:_this.pro.address,
							success: function () {
								console.log('success');
							}
						});
			},
			init(){
						var _this = this;
						console.log("this.userInfo: " +JSON.stringify( this.userInfo));
				uni.getStorage({
					key:"proId",
					success(e) {
						console.log("e.data: " + e.data);
						uni.request({
							url:"http://apptest.pinchao.cc/api.php/Store/getInfo",
							method:"post",
							header:{
								app_version:'1.0.0',
								system_version:_this.$system,
								"Content-Type":"application/x-www-form-urlencoded"
							},
							data:{
								"access_token":_this.userInfo.access_token,
								"uid":_this.userInfo.uid,
								"id":e.data
							},
							success(res) {
								//console.log(res)
								if(res.data.ret == '200'){
									_this.pro = res.data.data;
									_this.pro.intro = _this.pro.intro.replace( /<img src/g , '<img width="100%" src' );
									_this.pro.intro = _this.pro.intro.replace( /<p>/g , '<p style="line-height:26px;">' );
								}else{
									uni.showToast({
										icon:"none",
										title:res.data.msg
									})
								}
									
							},
							error(err){
								console.log("err:",err)
							}
						})
					}
				})
			},
			go_back(){
				uni.navigateBack();
			},
			morePraise(){
				uni.navigateTo({
					url:"/pages/home/commentlist"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar{
		position: fixed;
		top: 0;
	}
	.scrollList{
		width: 100%;
		height: calc(100% - 100upx);
		margin-top: 100upx;
	} 
	.content {
		box-sizing: border-box;
		min-height:calc(100% + 30upx);
		position: relative;
		background-color: #fff;
		.header_back {
			display: flex;
			align-items: center;
			height: 100upx;
			background-color: #000;
			flex-direction: row;
			position: fixed;
			top: var(--status-bar-height);
			z-index: 9;
			width: 100%;
			.header_content{
				text-align: center;
				font-size: 32upx;
				color:#fff;
				flex: 12;
			}
			.back_img {
				flex: 1;
				height: 40upx;
				margin-left: 40upx;
				margin-right: 20upx;
			
				image {
					width: 40upx;
					height: 40upx;
				}
			}
			.more_icon {
				width: 32upx;
				height: 48upx;
				flex: 2;
				display: inline-block;
				vertical-align: super;
			
				image {
					width: 48upx;
					height: 48upx;
				}
			}
		}
		.bigmig{
			width: 100%;
			height: 450upx;
			
		}
		.linetxt{
			width:  100%;
			height: 50upx;
			padding: 0upx 30upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			margin-top: 30upx;
		}
		.linetxttitlel{
			
			font-size: 40upx;
			color: #333;
			font-weight: bold;
			margin-left: 10upx;
		}
		.linetxttitle{
			flex: 8;
		}
		.homeiconbox{
			flex: 1;
		}
		.homeicon{
			width: 40upx;
			height: 40upx;
		}
		.minHright{
			height: 300upx;
			overflow-y: hidden;
		}
		.infoarea{
			width: 90%;
			margin: 20upx auto; 
			font-size: 28upx;
			color: #666; 
			line-height: 40upx;
			
		}
		.moreBtn{
				width: 100%;
				text-align: center;
				color: darkgray;
				line-height: 60upx;
				padding: 4upx 10upx;
				font-size: 32upx;
				
			}
		.addressbox{
			width: 90%;
			min-height: 120upx;
			margin:30upx auto;
			box-shadow: 0 0  10upx 0 #ccc;
			display: flex;
			flex-direction: row;
			.locationicon{
				width: 48upx;
				height: 48upx;
				margin: 36upx 30upx;
			}
			.addresstxt{
				flex: 1;
				.infotxta{
					width: 100%;
					display: block;
					color: #333;
					font-size: 36upx;
					font-weight: bold;
					line-height: 70upx;
				}
				.infotxtb{
					width: 100%;
					display: block;
					color: #999;
					font-size: 30upx;
				}
			}
			.rightsa{
				width: 48upx;
				height: 48upx;
				margin: 36upx 30upx;
			}
			
		}
		.looked{
			color:#A0A0A0;
			font-size: 28upx;
			margin: 40upx 30upx 24upx;
		}
		.praiseNum{
			width: calc(100% - 60upx);
			margin: 0 auto;
			min-height: 170upx;
			border-top: 1upx solid #f5f5f5;
			padding-top: 40upx;
			margin-top: 40upx;
			.praiseIcon{
				display: inline-block;
				width: 88upx;
				height: 100%;
				vertical-align: top;
				margin-top: 10upx;
				image{
					width: 44upx;
					height: 44upx;
					margin: 0 auto;
					display: block;
				}
				text{
					text-align: center;
					line-height: 50upx;
					color: #333;
					display: inline-block;
					width: 100%;
					line-height: 24upx;
					vertical-align: super;
					font-size: 20upx;
				}
			}
			
			.praiseImgs{
				display: inline-block;
				width: calc(100% - 110upx);
				height: 100%;
				image{
					width: 70upx;
					height: 70upx;
					border-radius: 70upx;
					margin-left: 10upx;
					margin-top: 10upx;
				}
				.more{
					width: 70upx;
					height: 70upx;
					border-radius: 70upx;
					margin-left: 10upx;
					margin-top: 10upx;
					background-color: lightgray;
					color: #fff;
					font-size: 24upx;
					text-align: center;
					line-height: 70upx;
				}
				
			}
		}
	}
</style>
